<template>
	<div class="simple-container">
		<!-- 输入组 -->
		<div class="input-group" v-for="(item, index) in inputs" :key="index">
			<label>{{ item.label }}</label>
			<input v-model.number="formData[item.key]" :type="item.type" :placeholder="item.placeholder" />
		</div>

		<!-- 计算按钮 -->
		<button @click="handleCalculate">计算</button>

		<!-- 结果面板 -->
		<div v-if="result" class="result-panel">
			<h2>生物计量报告</h2>
			<p>标准质量: {{ result.standardWeight }} kg</p>
			<p :class="statusClass">当前状态: {{ result.statusText }}</p>
		</div>
	</div>
</template>

<script>
	const GENDER_COEFFICIENT = [0.9, 0.85];
	const STATUS_CONFIG = {
		UNDERWEIGHT: {
			text: '质量不足',
			class: 'warning'
		},
		NORMAL: {
			text: '稳定态',
			class: 'success'
		},
		OVERWEIGHT: {
			text: '过载警告',
			class: 'error'
		}
	};

	export default {
		data() {
			return {
				inputs: [{
						label: '身高(cm)',
						key: 'height',
						type: 'number',
						placeholder: '输入当前身高'
					},
					{
						label: '当前质量(kg)',
						key: 'currentWeight',
						type: 'number',
						placeholder: '输入当前重量'
					}
				],
				formData: {
					height: null,
					currentWeight: null
				},
				result: null
			};
		},
		computed: {
			canCalculate() {
				return Object.values(this.formData).every(v => v > 0 && !isNaN(v));
			},
			statusClass() {
				return STATUS_CONFIG[this.result?.status]?.class || '';
			}
		},
		methods: {
			handleCalculate() {
				if (!this.canCalculate) return;

				const standard = (this.formData.height - 100) * GENDER_COEFFICIENT[0];
				const diff = this.formData.currentWeight - standard;

				let status;
				if (diff < -5) {
					status = 'UNDERWEIGHT';
				} else if (diff > 5) {
					status = 'OVERWEIGHT';
				} else {
					status = 'NORMAL';
				}

				this.result = {
					standardWeight: standard.toFixed(1),
					status,
					statusText: STATUS_CONFIG[status].text
				};
			}
		}
	};
</script>

<style lang="scss" scoped>
	.simple-container {
		padding: 20px;
		font-family: Arial, sans-serif;
	}

	.input-group {
		margin-bottom: 15px;
	}

	.input-group label {
		display: block;
		margin-bottom: 5px;
	}

	.input-group input {
		height: 60rpx;
		width: 100%;

		border: 1px solid #ccc;
		border-radius: 4px;
	}

	button {
		padding: 10px 20px;
		background-color: #007BFF;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	button:hover {
		background-color: #0056b3;
	}

	.result-panel {
		margin-top: 20px;
		padding: 15px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.result-panel h2 {
		margin-top: 0;
	}

	.warning {
		color: #ff6b6b;
	}

	.success {
		color: #28a745;
	}

	.error {
		color: #dc3545;
	}
</style>